<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-14 16:06:04
 * @LastEditTime: 2019-10-15 13:28:29
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div>
    <div class="w">
      <div class="header">
        <p>媒体报道</p>
      </div>
      <div class="content">
        <ul>
          <li v-for="(n,index) in news"
              :key="index">
            <div class="img">
              <el-image :src="n.url" fit="fill"></el-image>
            </div>
            <div class="word">
              <a class="title"
                 href="#">{{n.title}}</a>
              <div class="wt">
                <span>{{n.writor}}</span>
                <span class="right">{{n.time}}</span>
              </div>

              <span class="description">{{n.content}}</span>
            </div>
          </li>
        </ul>
        <div class="pagination">
          <span>共13页</span>
          <el-pagination layout="prev, pager, next"
                         :total="130"
                         background>
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      news: [
        {
          title: '拍拍贷去年实现净利同比增长128%',
          writor: '证券日报',
          time: '2019-03-15',
          content: '2017年第四季度。。。',
          url:"http://img3.imgtn.bdimg.com/it/u=3449590692,1662781867&fm=26&gp=0.jpg"
        },
        {
          title: '拍拍贷去年实现净利同比增长128%',
          writor: '证券日报',
          time: '2019-03-15',
          content: '2017年第四季度。。ASOIDHJASKJHDKJASHDFLSHDLKH。',
          url:"http://img4.imgtn.bdimg.com/it/u=1995395226,1806371212&fm=26&gp=0.jpg"
        },
        {
          title: '拍拍贷去年实现净利同比增长128%',
          writor: '证券日报',
          time: '2019-03-15',
          content: '2017年第四季度。。。',
          url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571923283&di=2f32769bd20a872939443a3de73babae&imgtype=jpg&er=1&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171229%2Fab3dff529d734a1098ca88d46899108f.gif"
        }
      ]
    }
  }
}
</script>

<style  scoped>
.content {
  min-height: 600px;
}
.content li {
  background-color: #f9f9f9;
  width: 95%;
  margin: 0 auto;
  margin-top: 10px;
  height: 170px;
  display: flex;
}
.img {
  margin: 15px;
  border: 5px #efefef solid;
  float: left;
  flex: 1;
}
.word {
  float: left;
  margin-top: 15px;
  margin-right: 15px;
  flex: 4;
}
.title {
  color: #439fff;
  font-size: 20px;
  border-bottom: 1px solid #cecece;
}
.wt {
  color: #9b9b9a;
  margin: 5px 0;
}
.description {
  color: #7d7d7d;
}
.pagination {
  margin: 40px 0 30px;
  justify-content: center;
  display: flex;
  align-items: center;
  color: #666;
}
.pagination span {
  margin-right: 10px;
}
</style>
